<template>
  <div class="bg-animation" :style="props?.customStyle ?? {}"></div>
</template>

<script setup lang="ts">
  interface Props {
    customStyle?: any;
  }

  const props = defineProps<Props>()
</script>

<style scoped lang="scss">
  .bg-animation {
    color: rgba(61, 62, 64, 0.88);
    font-size: 14px;
    line-height: 1.5714285714285714;
    text-align: center;
    z-index: 10;
    pointer-events: none;
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%) scale(1.5);
    width: 600px;
    height: 400px;
    opacity: 0.2;
    filter: blur(69px);
    background: linear-gradient(135deg,
      #722ED1 0%,
      #1677ff 30%,
      #F5222D 70%,
      #13C2C2 100%);
    background-size: 200% 200%;
    animation: glow 15s ease infinite;
  }

  @keyframes glow {
    0% {
      -webkit-background-position: 0 -100%;
      background-position: 0 -100%;
    }
    50% {
      -webkit-background-position: 200% 50%;
      background-position: 200% 50%;
    }
    100% {
      -webkit-background-position: 0 -100%;
      background-position: 0 -100%;
    }
  }
</style>
